import React from 'react';
// import { Icon, Drawer, Layout } from 'antd';
import { Layout } from 'antd';
// import SearchSong from './SearchSong';
// import Lyric from './Lyric';
import MenuContent from './MenuContent';
import './App.scss';

const { Header, Footer, Sider, Content } = Layout;

class App extends React.Component {
  state = {
    song: null,
    currentSongId: 0,
    drawerShow: false,
  }

  handleSearchSong(song) {
    if (!song) {
      return;
    }

    if (!this.state.song || song.id !== this.state.song.id) {
      this.setState({ song, currentSongId: song.id });
      window._Music.pause();
      window._Music.src = song.url;
      window._Music.play();
    }
  }

  onDrawerClose = () => {
    this.setState({ drawerShow: false })
  }

  render() {

    return (
      // <div className="App">
      //   <div className="title">
      //     <Icon type="menu" className="icon-menu" onClick={() => { this.setState({ drawerShow: true }) }}/>
      //     <span>Music</span>
      //   </div>
      //   <SearchSong placeholder="输入歌曲名称" style={{ width: '90%' }} onChange={(song)=>{ this.handleSearchSong(song) }}/>
      //   <div className="music-name">{this.state.song && this.state.song._name ? this.state.song._name : ''}</div>
      //   <Lyric id={this.state.currentSongId} />

      //   <Drawer
      //     placement="left"
      //     closable={false}
      //     onClose={this.onDrawerClose}
      //     visible={this.state.drawerShow}
      //   >
      //     <MenuContent />
      //   </Drawer>
      // </div>
      <Layout id="App">
        <Header id="Header">
          <span className="title">Music</span>
        </Header>
        <Layout>
          <Sider id="Sider">
            <MenuContent />
          </Sider>
          <Content id="Content">Content</Content>
        </Layout>
        <Footer id="Footer">Footer</Footer>
      </Layout>
    );
  }
}

export default App;
